<template>
  <div>
    <Navbar/>
    <div class="context">
      <van-swipe @change="onChange" >
        <van-swipe-item v-for="item in gallery" :key="item.id">
          <img v-lazy="item.img_url" width="100%" style="display: block;" alt="">
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">{{ current + 1 }}/{{bannertotal}}</div>
        </template>
      </van-swipe>

      <Tips/>

      <div class="info">
        <h3>{{info.name}}</h3>
        <p>{{info.goods_brief}}</p>
        <div>{{info.retail_price | filtermoney}}</div>
      </div>

      <van-cell class="showSku" title="选择规格" is-link @click="skushow=!skushow" />

      <div class="attribute">
        <h4>商品参数</h4>
        <ul>
          <li v-for="(item,index) in attribute" :key="index">
            <span>{{item.name}}</span>
            <section>{{item.value}}</section>
          </li>
        </ul>
      </div>

      <div  class="product_image" v-html="info.goods_desc"></div>

      <div class="issue">
        <div class="line_title">
          <span></span>
          <h3>常见问题</h3>
        </div>
        <ul class="issue_content">
          <li v-for="item in issue" :key="item.id">
            <h3>{{item.question}}</h3>
            <p>{{item.answer}}</p>
          </li>
        </ul>
      </div>

      <div class="line_title">
        <span></span>
        <h3>大家都在看</h3>
      </div>

      <Product :goodsList="goodsList" />

      <van-sku
        v-model="skushow"
        :sku="sku"
        :goods="goods"
        :hide-stock="sku.hide_stock"
        ref="sku"
      />

      <MyGoodsAction @addToCart="addToCart" :badge="badge" />
    </div>
    <BackTop/>
  </div>
</template>

<script>
import Navbar from '../components/Navbar.vue'
import Tips from '../components/Tips.vue'
import Product from '../components/Product.vue'
import MyGoodsAction from '../components/MyGoodsAction.vue'
import BackTop from '../components/BackTop.vue'
import { GetGoodsDetail, GetGoodsRelated, GetCartSum, AddToCart } from '../request/api'
export default {
  name: 'ProductDetail',
  data() {
    return {
      // 轮播图当前展示第几个
      current: 0,
      // sku的显示状态
      skushow: false,
      sku: {
        tree: [],
        hide_stock: false,
        price: '',
        stock_num: ''
      },
      goods: {
        picture: ''
      },
      // 轮播图
      gallery: [],
      // 商品信息
      info: {
        retail_price: ''
      },
      // 商品参数
      attribute: [],
      // 常见问题
      issue: [],
      // 相关产品数组
      goodsList: [],
      // productList
      productList: [],
      // 购物车数量
      badge: 0
    }
  },
  components: {
    Navbar,
    Tips,
    Product,
    MyGoodsAction,
    BackTop
  },
  computed: {
    // 轮播图片总个数放到轮播图上展示
    bannertotal() {
      return this.gallery.length
    }
  },
  methods: {
    // 获取购物车的数量
    getCartCountFn() {
      GetCartSum().then(res => {
        if (res.errno == 0) {
         this.badge = res.data.cartTotal.goodsCount
        }
      })
    },
    // 点击添加购物车
    addToCart() {
      // 判断sku是否打开
      if (this.skushow) {
        // sku已经打开，添加到购物车当中
        let token = localStorage.getItem('usertoken')
        if (token) {
          let num = this.$refs.sku.getSkuData().selectedNum
          AddToCart({
            goodsId: this.$route.params.id,
            productId: this.productList[0].id,
            number: num
          }).then(res => {
            if (res.errno == 0) {
              this.$toast.success("添加成功");
              // 关闭sku
              this.skushow = false;
              this.badge = res.data.cartTotal.goodsCount
            }
          })
        } else {
          this.$router.push('/cart')
        }
      } else {
        this.skushow = true
      }
    },
    // 轮播图的改变事件
    onChange(index) {
      this.current = index;
    }
  },
  mounted() {
    GetGoodsDetail({
      id: this.$route.params.id
    }).then(res => {
      if (res.errno == 0) {
        let { gallery, info, attribute, issue, productList } = res.data
        this.gallery = gallery
        this.info = info
        this.attribute = attribute
        this.issue = issue
        this.productList = productList
        // 渲染sku
        this.goods.picture = info.list_pic_url
        this.sku.price = info.retail_price.toFixed(2)
        this.sku.stock_num = info.goods_number
      }
    })
    GetGoodsRelated({
      id: this.$route.params.id
    }).then(res => {
      if (res.errno == 0) {
        let { goodsList } = res.data
        this.goodsList = goodsList
      }
    })
    // 先判断有没有token
    let token = localStorage.getItem('usertoken');
    if (token) {
      // 调用获取购物车数量的函数
      this.getCartCountFn();
    }
  },
  watch: {
    $route(to, from) {
      if (to.path == from.path) return;
      this.$router.go(0); // 刷新页面
    },
  }
}
</script>

<style lang="less" scoped>
.context {
  padding-bottom: 50px;
}
.info {
  background: #fff;
  text-align: center;
  padding: 15px 0;
  h3 {
    font-weight: normal;
    font-size: .2rem;
    line-height: 30px;
  }
  p {
    color: #999;
    font-size: .14rem;
    line-height: 30px;
  }
  div {
    color: darkred;
    font-size: .14rem;
    line-height: 30px;
  }
}


.showSku {
  margin-bottom: 20px;
  border-top: 1px solid #ccc;
}

.attribute {
  background: #fff;
  padding: 5px 2%;
  overflow: hidden;
  h4 {
    font-weight: normal;
    font-size: .2rem;
    margin-top: 20px;
    margin-bottom: 15px;
    padding-left: .1rem;
  }
  ul {
    padding: 0 .1rem;
    li {
      background: #efefef;
      height: 40px;
      line-height: 40px;
      margin-bottom: 10px;
      border-radius: 4px;
      display: flex;
      justify-content: space-between;
      span {
        width: 24%;
        color: #999;
        text-align: right;
      }
      section {
        flex: 1;
        padding-left: .1rem;
        // 最多显示一行的文字，多余的内容会被省略
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

// 这里要深度修改样式，如果不加/deep/,样式在控制台上看不到，也就是没有给这个div加上样式，或者把style中的scoped去掉，也可加上样式。

/deep/.product_image {
  img {
    width: 100%;
    display: block;
  }
}

.line_title {
  width: 100%;
  height: 40px;
  position: relative;
  font-size: .18rem;
  background: #fff;
  span {
    width: 50%;
    height: 2px;
    background: #ccc;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  h3 {
    width: 30%;
    height: 40px;
    font-weight: normal;
    font-size: .18rem;
    background: #fff;
    position: absolute;
    text-align: center;
    line-height: 40px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
}

.issue {
  background: #fff;
  .issue_content {
    h3 {
      font-weight: normal;
      height: 40px;
      padding-left: .2rem;
      line-height: 40px;
      font-size: .16rem;
      position: relative;
      padding-right: .1rem;
      &::before {
        content: "";
        width: 4px;
        height: 4px;
        background: darkred;
        border-radius: 50%;
        position: absolute;
        left: 8px;
        top: 50%;
        margin-top: -2px;
      }
    }
    p {
      font-size: .14rem;
      padding-left: .2rem;
      padding-right: .1rem;
      color: #666;
    }
  }
}
.van-goods-action {
  z-index: 9999;
}
.van-sku-container {
  min-height: auto;
}

// 轮播图右下加角标
.custom-indicator {
  position: absolute;
  color: #fff;
  right: 6px;
  bottom: 6px;
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.3);
}
</style>